import React from 'react';
import {StyleSheet,} from 'react-native';
import ViewUtils from '../utils/ViewUtils';
import {NavigationEvents} from "react-navigation";
import BasePage from "./BasePage";
import WebNavigationBar from "./common/WebNavigationBar";
import {commonStyles} from "../configs/commonStyle";
import WebView from 'react-native-webview';
import {inject, observer} from "mobx-react";
import {View} from "react-native-ui-lib";
import {getStatusBarHeight} from 'react-native-status-bar-height';
import {isAndroid} from '../configs/platform';

/**
 * 通用WebView加载控件
 * 传title url
 */
@inject("userStore")
@observer
export default class H5Page extends BasePage {
    constructor(props) {
        super(props)
        this.params = this.props.navigation.state.params;
        this.state = {
            title: this.params.title,
            url: this.params.url,
            canGoBack: false,
            isShowClose: false
        };
    }


    _onNavigationStateChange = (navState) => {
        if (navState.canGoBack) {
            global.isBack = true;
        } else {
            global.isBack = false;
        }
    }
    render = () => {
        return (
            <View useSafeArea style={{...commonStyles.body,marginTop:isAndroid()?getStatusBarHeight():0}}>
                <NavigationEvents
                    onDidFocus={this.onDidFocus}
                    onDidBlur={this.onDidBlur}
                />
                <View style={styles.container}>
                    <WebNavigationBar
                        leftButton={ViewUtils.getLeftButton(() => {
                            if (global.isBack) {
                                this.setState({
                                    isShowClose: true
                                });
                                global.webview.goBack();
                            } else {
                                this._onBackPress();
                            }
                        })}
                        closeButton={this.state.isShowClose ? ViewUtils.getLeftCloseBtn(() => {
                            this._onBackPress();
                        }) : null}
                        rightButton={ViewUtils.getRightBtn(require('../images/ic_refresh.png'), () => {
                            global.webview.reload();
                        })}
                        title={this.state.title}
                    />
                    <View style={{flex: 1}}>
                        <WebView
                            ref={w => global.webview = w}
                            style={{flex: 1}}
                            startInLoadingState={true}
                            mixedContentMode={'always'}
                            javaScriptEnabled={true}
                            domStorageEnabled={true}
                            allowsInlineMediaPlayback={true}
                            scalesPageToFit={true}
                            automaticallyAdjustContentInsets={true}
                            onNavigationStateChange={this._onNavigationStateChange}
                            source={{uri: this.state.url}}/>
                    </View>
                </View>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
    },
});
